<template>
  <div style="display: flex; align-items: center">
    <el-dialog
      title="轨道线队列"
      :visible.sync="dialogTableVisibleChild"
      :before-close="handleClose"
    >
      <!-- @selection-change="handleSelectionChange" -->
      <el-table
        :data="gridData"
        border
        ref="table"
        @row-click="handleRowClick"
        row-key="id"
        highlight-current-row
      >
        <!-- <el-table-column type="selection" width="55"> </el-table-column> -->
        <el-table-column
          property="RowNo"
          label="轨道线队列"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          property="FlowNo"
          label="任务标识"
          width="130"
          align="center"
        ></el-table-column>
        <el-table-column
          property="CID"
          label="托盘编码"
          align="center"
          width="130"
        ></el-table-column>
        <el-table-column
          property="CTypeCode"
          label="托盘类型编码"
          align="center"
        ></el-table-column>
        <el-table-column
          property="CreateDate"
          label="入轨时间"
          align="center"
          width="130"
        ></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="danger" @click="delTaskQueue">删 除</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { api } from "@/utils/api";

export default {
  data() {
    return {
      action: true,
      dialogTableVisibleChild: false,
      gridData: [],
      multipleSelection: [],
      currentRow: null, // 用于存储当前选中的行
      status: true,
    };
  },
  watch: {
    status(newVal, oldVal) {
      console.log("newVal, oldVal", newVal, oldVal);
      if(newVal) this.currentRow = null;
    },
    dialogTableVisible(n, o) {
      this.dialogTableVisibleChild = n;
      if (n) {
        this.getWcsTaskQueue(this.QueueLocationId);
        console.log("dialogTableVisible", n);

        let that = this;
        this.$nextTick(() => {
          that.$refs.table.clearSelection();
          that.currentRow = null;
          that.status = true;
          this.$refs.table.setCurrentRow();
        });
      }
    },
  },
  props: ["dialogTableVisible", "QueueLocationId"],
  methods: {
    handleRowClick(row, column, event) {
      // 清除之前的选中
      if (this.currentRow && this.currentRow !== row) {
        this.$refs.table.clearSelection();
      }
      console.log(
        "row, column, event",
        this.currentRow,
        row,
        this.currentRow == row
      );
      this.status = !this.status;

      if (this.currentRow && this.currentRow == row && this.status) {
        this.$refs.table.setCurrentRow();
      } else {
        this.$refs.table.toggleRowSelection(row, true);
      }
      // 设置新的选中行
      this.currentRow = row;
      // 如果需要，可以通过编程方式选中这一行
    },
    // 获取选中项
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 关闭弹窗
    handleClose() {
      this.$refs.table.setCurrentRow();
      this.dialogTableVisibleChild = false;
      this.$emit("queueVisible", false);
    },
    // 删除托盘
    delTaskQueue() {
      const { FlowNo } = this.currentRow;
      // const FlowNo = this.multipleSelection.map((m) => m.FlowNo)[0];
      this.taskqueueDel(FlowNo);
    },
    // 删除托盘api
    async taskqueueDel(FlowNo) {
      //   console.log("value", value, this.action);
      let params = {
        app_name: "gui",
        data: {
          FlowNo,
        },
      };
      let [ERR, ARES] = await api.taskqueueDelAPI(params);
      if (ARES.code === 0) {
        this.dialogTableVisibleChild = false;
        this.$emit("queueVisible", false);
        this.$emit("handleQueue", { code: 0 });
      }
      // console.log("stationSwitchPost", ARES);
    },
    // 获取托盘列表
    async getWcsTaskQueue(LocationId) {
      let params = {
        LocationId,
      };
      let [ERR, ARES] = await api.getWcsTaskQueueAPI(params);
      if (ARES.code === 0) {
        this.gridData = ARES.data.map((m, index) => ({ ...m, id: index }));
        // this.gridData = [
        //   {
        //     RowNo: 1,
        //     FlowNo: 42,
        //     CID: "69",
        //     CTypeCode: "53",
        //     CreateDate: "2010-09-23",
        //   },
        //   {
        //     RowNo: 2,
        //     FlowNo: 71,
        //     CID: "43",
        //     CTypeCode: "13",
        //     CreateDate: "1994-11-21",
        //   },
        // ];
      } else {
        this.$message({
          type: "warning",
          message: ARES.message,
        });
      }
      console.log("stationSwitchPost", ARES);
    },
  },
};
</script>
<style lang="scss" scoped>
/deep/ .el-table__body tr.current-row > td.el-table__cell,
.el-table__body tr.selection-row > td.el-table__cell {
  background: #f56c6c;
  cursor: pointer;
}
</style>
